<template>
  <div v-for="item of skholders" class="content">
    <h2>{{ getFullName(item) }}</h2>
    <div>{{ item.resume_cn }}</div>
  </div>
</template>

<script setup>
  import dayjs from 'dayjs';
  import { useRoute } from 'vue-router';
  import { ref, inject, computed, watch, onMounted } from 'vue';

  import helpers from '@/libs/helpers';

  const $route = useRoute();
  const $http = inject('$http');

  const skholders = ref([]);
  const currentShare = ref('');

  function getFullName(item) {
    return `${item.personal_name} / ${item.position_name} / ${dayjs(item.employ_date).format('YYYY-MM-DD')} / ${helpers.friendlyNumbers(item.annual_salary)}元 / ${helpers.friendlyNumbers(item.held_num)}股`;
  }

  async function loadSkholders() {
    if (!currentShare.value) {
      return;
    }

    let res = await $http.get(`/api/shares/${currentShare.value}/skholder`);

    skholders.value = res.datas;
  }

  watch($route, () => {
    currentShare.value = $route.params.code;

    loadSkholders();
  });

  onMounted(() => {
    currentShare.value = $route.params.code;

    loadSkholders();
  });
</script>

<style lang="less" scoped>
  .content {
    background: #fff;
    border-radius: 5px;
    padding: 5px 10px;

    &:not(:first-of-type) {
      margin-top: 8px;
    }

    > h2 {
      padding: 0;
      margin: 0;
      font-size: 14px;
      padding-bottom: 5px;
      border-bottom: 1px solid #ccc;
    }

    > div {
      font-size: 12px;
      line-height: 1.4;
      text-indent: 20px;
      padding-top: 5px;
    }
  }
</style>
